﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>@ViewBag.Title</title>
    <script src="../Scripts/jquery-1.6.2.js" type="text/javascript"></script>
    <link href="../Content/Styles/votepage.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
    </script>

@model RipPoll.Web.Mvc.Models.PollModel
@{
    ViewBag.Title = "   Preview";
    ViewBag.PageDivId = "headerLocal";
    ViewBag.Margin = "margin-left:25px;";
}

@*<style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 80%; width:100%;}
   </style>
  
*@
 <script type="text/javascript">

     var geocoder;
     var map;
     var image = "../Content/images/pushpin.png";


     $(document).ready(
        function () {
            WCFJSONMVC();
        }
    );



        function WCFJSONMVC() {
           // alert('inside WCFJSONMVC');
            //var pollIdval = "6";
            var pollIdval = $('input[id="pollId"]').val();
            //alert('pollid' + pollIdval)
            $.ajax({
                type: "POST",
                url: "http://mvc.rippoll.com/rippollwebmvc/Poll/GetZipCodesForPollid",
                data: "PollId=" + pollIdval,
                //contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    ServiceSucceeded(msg);
                },
                error: ServiceFailed
            });
        }

     function ServiceFailed(result) {
         alert('Call failed: ' + result.status + ' , ' + result.statusText);
     }

     function ServiceSucceeded(result) {
        // alert('call service...success');
         Loadmap(result);
     }



     function Loadmap(ziparr) {
         //alert('Inside Loadmap');
         //alert(ziparr);

         geocoder = new google.maps.Geocoder();
         var latlng = new google.maps.LatLng(38.898243, -94.704936);
         var myOptions = {
             zoom: 4,
             center: latlng,
             mapTypeId: google.maps.MapTypeId.TERRAIN
             //disableDefaultUI: false,
             //disableDoubleClickZoom: true,
             //draggable: false
         };
         map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

         //alert('map loaded');
         //alert('Loading zips');

         for (var i = 0; i < ziparr.length; i++) {
             address = ziparr[i];
             DisplayPin(address);
         }


         google.maps.event.trigger(map, "resize");
         //HidePin("66215"); 
     }

     function DisplayPin(address) {         
         geocoder.geocode({ 'address': address }, function (results, status) {
             if (status == google.maps.GeocoderStatus.OK) {
                 //map.setCenter(results[0].geometry.location);
                 //alert(address);
                 var marker = new google.maps.Marker({
                     map: map
                     ,position: results[0].geometry.location
                     ,title: address
                     ,icon: image
                 });
             }
         });
     }


     function HidePin(address) {
         geocoder.geocode({ 'address': address }, function (results, status) {
             if (status == google.maps.GeocoderStatus.OK) {
                 map.setCenter(results[0].geometry.location);
                 var marker = new google.maps.Marker({
                     map: map,
                     position: results[0].geometry.location,
                     title: address,
                     icon: image
                 });
                 marker.hide();
             }
         });
     }

    </script>
    </head>
    <body>
    

<h2>Preview</h2>

<table>
    <tr>
        <td align="left">
        
  <div id="voteBox">  
    <div id="voteText">
             <div>
                Poll Question: <br />
                @Model.Name
             </div>
             <br />
              <span class="voteHead">Category</span><br />
                <div>
                @Model.Category
             </div>
             <br />
             <div>
                Choices: <br />
                @foreach(var myValue in Model.Choices) {
                    @Html.RadioButton("choiceList", myValue)
                    @myValue <br />
                }
                    
                
             </div>
             <br />

          @*<input type="radio" name="radio" id="radio" value="radio" />
          <span class="voteChoiceText">answer</span>

          <input type="radio" name="radio2" id="radio2" value="radio2" />
          <span class="voteChoiceText">answer</span>
          <input type="radio" name="radio3" id="radio3" value="radio3" />
          <span class="voteChoiceText">answer</span><br />
         <span class="createdBy">Rippoll created by: name</span><br />*@
</div>
<div id="tallyBox">

<span class="tally">000</span><br />
<span class="createdBy">Votes so far</span><br /><input name="vote2" type="submit" id="vote2" onclick="MM_goToURL('parent','map_page.html');return document.MM_returnValue" value="Vote Now!" />
<br />
<input name="myPage" type="submit" id="myPage" onclick="MM_goToURL('parent','map_page.html');return document.MM_returnValue" value="My Page" />
</div>
  </div>

        </td>
    </tr>
</table> 
<table border="0" style="width:850px">
    <tr>
        <td  style="vertical-align:top" colspan="2">
            <div id="map_canvas" style="width:800px; height:500px; vertical-align:top" ></div>
        </td>
    </tr>
    <tr>
       <td style="vertical-align:top;width:50%" >               
                <table border="0" cellspacing="5" cellpadding="0">
                    <tr>
                        <td colspan="2">
                            <div id="columnLeft"><img src="../Content/images/results.jpg" width="390" height="40"  alt="rippoll.com" /></div>
                        </td>
                    </tr>
                    <tr>
                    <td rowspan="4">
                        <img src="../Content/images/pie_chart.jpg" width="250" height="200"  alt="rippoll.com" />
                    </td>
                    <td width="100" height="39" align="center" bgcolor="#2CC52C" class="voteTalley">000</td>
                    </tr>
                    <tr>
                    <td height="39" colspan="2" align="center" bgcolor="#3399FE" class="voteTalley">000</td>
                    </tr>
                    <tr>
                    <td height="39" colspan="2" align="center" bgcolor="#9A33CC" class="voteTalley">000</td>
                    </tr>
                    <tr>
                    <td height="39" colspan="2" align="center" bgcolor="#FF3366" class="voteTalley">000</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <img src="../Content/images/preview_box_ad_space.jpg" width="390" height="140" alt="rippoll.com" /><br />
                        </td>
                    </tr>
                </table>
                
        </td>
        <td style="vertical-align:top;width:50%">
            <table border="0" cellspacing="5" cellpadding="0" >
                <tr>
                    <td style="height:39px">
                        <div id="followedBy">
                            <span class="followedby">followed by</span> 
                            <img src="../Content/images/friend_image_placeholder.jpg" width="30" height="30" class="friend" alt="rippoll.com" />
                            <img src="../Content/images/arrow_rt.png" width="24" height="24" class="arrow"  alt="rippoll.com" />
                        </div>        
                    </td>
                </tr>
               <tr>
                    <td>
                        <div id="commentBox"> 
                            <img src="../Content/images/friend_image_placeholder.jpg"  alt="rippoll.com" width="60" height="60" class="commentImageLeft" />
                            <span class="commentName">Friend X </span>
                            <span class="commentDate">March 14 wrote:</span>
                            <span class="comment"><br />
                            <br />Comment text.</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="commentBox"> 
                            <img src="../Content/images/friend_image_placeholder.jpg"  alt="rippoll.com" width="60" height="60" class="commentImageLeft" />
                            <span class="commentName">Friend X </span>
                            <span class="commentDate">March 14 wrote:</span>
                            <span class="comment"><br />
                            <br />Comment text.</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="commentBox"> 
                            <img src="../Content/images/friend_image_placeholder.jpg"  alt="rippoll.com" width="60" height="60" class="commentImageLeft" />
                            <span class="commentName">Friend X </span>
                            <span class="commentDate">March 14 wrote:</span>
                            <span class="comment"><br />
                            <br />Comment text.</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="commentBox"> 
                            <img src="../Content/images/friend_image_placeholder.jpg"  alt="rippoll.com" width="60" height="60" class="commentImageLeft" />
                            <span class="commentName">Friend X </span>
                            <span class="commentDate">March 14 wrote:</span>
                            <span class="comment"><br />
                            <br />Comment text.</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="commentBox"> 
                            <img src="../Content/images/friend_image_placeholder.jpg"  alt="rippoll.com" width="60" height="60" class="commentImageLeft" />
                            <span class="commentName">Friend X </span>
                            <span class="commentDate">March 14 wrote:</span>
                            <span class="comment"><br />
                            <br />Comment text.</span>
                        </div>
                    </td>
                </tr>
            </table>


        </td>
    </tr>

    </table>

@{
    Layout = "";
 }
 <input type="hidden" id="pollId" value="@Model.Id" />
 </body>
 </html>